<template>
    <div id="manage">
        <div class="count-statistics">
            <el-collapse
                v-model="activeName"
            >
                <el-collapse-item
                    title="点击次数排名前十的文章"
                    name="readingTimes"
                >
                    <el-table
                        v-loading="loading"
                        :data="readingTimesInfo"
                        border
                        style="width: 100%"
                    >
                        <el-table-column
                            label="序号"
                            type="index"
                            width="80"
                            align="center"
                            fixed="left"
                        ></el-table-column>
                        <el-table-column
                            prop="date"
                            label="发布时间"
                            width="180"
                            fixed="left"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="readingTimes"
                            label="阅读次数"
                            width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="title"
                            label="标题"
                            width="300"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="synopsis"
                            label="简介"
                            width="600"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="所属类型"
                            width="180"
                        >
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item
                    title="点赞次数排名前十的文章"
                    name="likes"
                >
                    <el-table
                        v-loading="loading"
                        :data="likesInfo"
                        border
                        style="width: 100%"
                    >
                        <el-table-column
                            label="序号"
                            type="index"
                            width="80"
                            align="center"
                            fixed="left"
                        ></el-table-column>
                        <el-table-column
                            prop="date"
                            label="发布时间"
                            width="180"
                            fixed="left"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="likes"
                            label="点赞次数"
                            width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="title"
                            label="标题"
                            width="300"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="synopsis"
                            label="简介"
                            width="600"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="所属类型"
                            width="180"
                        >
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item
                    title="评论次数排名前十的文章"
                    name="commentTotal"
                >
                    <el-table
                        v-loading="loading"
                        :data="commentTotalInfo"
                        border
                        style="width: 100%"
                    >
                        <el-table-column
                            label="序号"
                            type="index"
                            width="80"
                            align="center"
                            fixed="left"
                        ></el-table-column>
                        <el-table-column
                            prop="date"
                            label="发布时间"
                            width="180"
                            fixed="left"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="commentTotal"
                            label="评论次数"
                            width="100"
                        ></el-table-column>
                        <el-table-column
                            prop="title"
                            label="标题"
                            width="300"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="synopsis"
                            label="简介"
                            width="600"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="所属类型"
                            width="180"
                        >
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
    import { getArticleRanking } from 'assets/js/api';
    export default {
        data () {
            return {
                activeName: 'readingTimes', // 当前活动面板
                readingTimesInfo: [], // 点击次数数据
                likesInfo: [], // 点赞次数数据
                commentTotalInfo: [], // 评论次数数据
                loading: true // table loading
            };
        },
        mounted () {
            Promise.all([this.getArticleRanking('readingTimes'), this.getArticleRanking('likes'), this.getArticleRanking('commentTotal')]).then(res => {
                this.readingTimesInfo = res[0];
                this.likesInfo = res[1];
                this.commentTotalInfo = res[2];
                this.loading = false;
            });
        },
        methods: {
            /**
             * 根据不同类型去查询文章排名数据
             * @param {String} type 类型
             */
            getArticleRanking (type) {
                return new Promise((resolve, reject) => {
                    getArticleRanking({
                        type
                    }).then(res => {
                        resolve(res.data);
                    });
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/manageCommon';
.count-statistics{
    height: 100%;
    overflow-x: hidden;
    padding: 20px 10px;
}
</style>
